<template>
	<div class="border py-1 px-2 rounded mr-2 position-relative d-flex align-items-center">
		<div v-if="type != 0">
			<!-- 颜色选择器 -->
			<el-color-picker v-if="type === 1" size="mini"></el-color-picker>
			<!-- 图片选择 -->
			<template v-else>
				<span v-if="!item.image" class="btn btn-light border" @click="handleImage">
					<i class="el-icon-plus"></i>
				</span>
				<img v-else 
				:src="item.image" class="rounded" 
				style="width:45px; height:45px; cursor: pointer;"
				@click="handleImage"
				/>
			</template>
		</div>
		<input type="text" :value="item.name" @input="inputChange" class="form-control text-center border-0"
			style="width:80px; font-size:15px;" />
		<span class="btn btn-light p-0 position-absolute" style="right:-10px; top:-10px;line-height: 1;">
			<i class="el-icon-circle-close" @click="delSkuValue({ cardIndex, valueIndex })"></i>
		</span>
	</div>
</template>
<script>
import { mapMutations } from "vuex"
export default {
	name: "sku-card-children",
	inject: ['app'],
	props: {
		type: {
			type: Number,
			default: 0
		},
		item: Object,
		cardIndex: Number,
		valueIndex: Number
	},
	methods: {
		...mapMutations(['delSkuValue', 'updateSkuValue']),
		inputChange(e) {
			this.vModel('name', e.target.value);
		},
		vModel(key, value) {
			this.updateSkuValue({
				cardIndex: this.cardIndex,
				valueIndex: this.valueIndex,
				key,
				value
			});
		},
		// 选择图片
		handleImage(){
			this.app.show(res=>{
				this.vModel('image', res[0].url);
			}, 1);
		}
	}
}
</script>